<template>
    <div class="app-container">

        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float: right;" type="primary" @click="getList" size="small" >查询结果</el-button>
                <el-button style="float: right; margin-right: 15px;" size="small">重置</el-button>
            </div>
            <div style="margin-top: 25px;">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item  label="输入搜索：">
                        <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品货号：">
                        <el-input style="width: 203px" v-model="listQuery.productSn" placeholder="商品货号"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card class="operate-container" shadow="never" style="margin-top: 20px;">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button class="btn-add" size="mini" @click="handleAddProduct()">添加</el-button>
        </el-card>

        <div class="table-container">
            <el-table :data="list">
                <el-table-column type="selection" width="60" align="center"></el-table-column>
                <el-table-column label="编号" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.id}}</template>
                </el-table-column>
                <el-table-column label="商品图片" width="120" align="center">
                    <template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
                </el-table-column>
                <el-table-column label="商品名称" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.name }}</p>
                        <p>品牌:{{ scope.row.brandName }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号" align="center">
                    <template slot-scope="scope">
                        <p>价格：￥{{ scope.row.price }}</p>
                        <p>货号:{{ scope.row.productSn }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="标签" align="center">
                    <template slot-scope="scope">
                        <p>上架:
                            <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.publishStatus"></el-switch>
                        </p>
                        <p>新品:
                            <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.newStatus"></el-switch>
                        </p>
                        <p>推荐:
                            <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.recommandStatus"></el-switch>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="排序" align="center">
                    <template slot-scope="scope">{{scope.row.sort}}</template>
                </el-table-column>
                <el-table-column label="SKU库存" width="100" align="center">
                    <template slot-scope="scope">

                    </template>
                </el-table-column>
                <el-table-column label="销量" width="100" align="center">
                    <template slot-scope="scope">{{ scope.row.sale }}</template>
                </el-table-column>
                <el-table-column label="审核状态" width="100" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.verifyStatus | verifyStatusFilter }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleUpdateProduct(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="handleDeleteProduct(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {getPmsProductList,deletePmsProduct} from '@/api/pmsApi'
export default {
    name: 'pmsProductList',
    components: { 
        
    },
    data() {
        return {
            listQuery:{

            },
            list:[

            ]
        }
    },
    created() {
        this.getList();
    },
    filters: {
        verifyStatusFilter(value) {
            if (value == 1) {
                return '审核通过';
            } else {
                return '未审核';
            }
        }
    },
    methods: {
        // 查询商品列表
        getList() {
            getPmsProductList({}).then(response => {
                this.list = response.data.data;
            });
        },
        handleAddProduct() {
            this.$router.push({ path:'/pmsProductAdd'})  
        },
        // 跳转到商品编辑页面
        handleUpdateProduct(index, row) {
            this.$router.push({ path:'/pmsProductUpdate', query:{id:row.id}})  
        },
        // 删除产品
        handleDeleteProduct(index, row) {
            this.$confirm('是否要删除该产品', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deletePmsProduct(row.id, {}).then(response => {
                        this.$message({
                            type: 'success',
                            message: '删除商品成功',
                            duration:1000
                        });
                        this.getList();
                    });
                }
            );
        }
    }
}
</script>

<style>

</style>